import lessModule from "./index.module.less"
import enlargeImage from "../../../../../../../../assets/image/panoramicMonitoringPage-enlarge.png"
import narrowImage from "../../../../../../../../assets/image/panoramicMonitoringPage-narrow.png"
import eImage from "../../../../../../../../assets/image/panoramicMonitoringPage-e.png"
import rangingImage from "../../../../../../../../assets/image/panoramicMonitoringPage-ranging.png"
import { $eventBus } from "../../../../../../../../common/utils"

// 主页-全景监控页面-浮层组件-工具组件
const HomePage_PanoramicMonitoringPage_LayerComponent_ToolComponent: React.FC = () => {
    const tooltipList = [{ name: "enlarge", image: enlargeImage }, { name: "narrow", image: narrowImage }, { name: "e", image: eImage }, { name: "ranging", image: rangingImage }]

    return (
        <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentToolComponent"]}>
            {
                tooltipList.map((item, idx) => {
                    return (
                        <div key={`tooltipItem${idx}`} className={lessModule["homePagePanoramicMonitoringPageLayerComponentToolComponent-btn"]}
                            style={{ marginBottom: idx ? 8 : 2}}
                            onClick={() =>   $eventBus.emit("homePagePanoramicMonitoringPageMapComponent_tooltip",item["name"])}>
                            <img src={item["image"]} />
                        </div>
                    )
                })
            }
        </div>
    )
}



export default HomePage_PanoramicMonitoringPage_LayerComponent_ToolComponent